<template>
    <CommonCard title="累计用户数" :count="usersTotal">
        <template #middle>
            <v-chart :option="setOption()"></v-chart>
        </template>
        <template #bottom>
            <div class="foot">
                <div class="content">
                    <span>日同比</span>
                    <span class="ml-5 mr-5">{{ userGrowthLastDay }}</span>
                    <span class="down"></span>
                </div>
                <div class="content">
                    <span>月同比</span>
                    <span class="ml-5 mr-5">{{ userGrowthLastMonth }}</span>
                    <span class="up"></span>
                </div>
            </div>
        </template>
    </CommonCard>
</template>

<script setup lang="ts">
import CommonCard from "../CommonCard/index.vue"
import useEchartStore from '@/stores/echart'
import { computed } from "vue";
const echartStore = useEchartStore();
const usersTotal = computed(() => {
    return echartStore.echartData.usersTotal
})
const usersLastDay = computed(() => {
  return echartStore.echartData.usersLastDay
})
const usersLastMonth = computed(() => {
  return echartStore.echartData.usersLastMonth
})
const userGrowthLastDay = computed(() => {
    return echartStore.echartData.userGrowthLastDay
})
const userGrowthLastMonth = computed(() => {
    return echartStore.echartData.userGrowthLastMonth
})

const setOption = () => {
    return {
        xAxis: {
            show: false,
            type: 'value',
            max: usersTotal.value,
            min: 0
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0
        },
        series: {
            name: '用户增长量',
            type: 'bar',
            data: [usersTotal.value - usersLastMonth.value],
            barWidth: '30%',
            showBackground: true,
            color: 'red',
            label: {
                show: true,
                formatter() {
                    return '|'
                },
                position: 'right',
                distance: 50,
                color: 'red'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.foot {
    display: flex;
    justify-content: space-between;
    &>div {
        display: flex;
        align-items: center;
    }
}

.up {
    border: 5px solid red;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
}

.down {
    border: 5px solid blue;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
</style>               